/* 登录
 * @Author: wujie 
 * @Date: 2018-06-12 11:06:22 
 * @Last Modified by: wujie
 * @Last Modified time: 2018-07-26 14:01:25
 */
import React,{ Component } from 'react'
import components from '@/components/index'
import actions from '@/actions/login'
import { connect } from 'react-redux';
import util from '@/utils'

const { LoginForm } = components

class Login extends Component {

  render(){

    const props = util.pick(this.props,[
      'validatePictureData',
      'account',
      'passWord',
      'validateCode',
      'loginButtonLoading',
      'spinningValiCoder'
    ])

    const funcProps = util.pick(this, [
      'onLogin',
      'onRegister',
      'onValidatePicture',
      'onChangeAccount',
      'onChangePassWord',
      'onChangeValidateCode',
    ])

    return (
        <LoginForm {...props} {...funcProps} />
    )
  }

  componentDidMount() {
    this.onValidatePicture();
  }

  onLogin = () => {
    this.props.login()
  }

  onRegister = () => {
    this.props.history.push('/register')
  }

  onValidatePicture = () => {
    this.props.getValidatePicture()
  }

  onChangeAccount = ({ target: { value }}) => {
    this.props.setAccount(value)
  }

  onChangePassWord = ({ target: { value }}) => {
    this.props.setPassWord(value)
  }

  onChangeValidateCode = ({ target: { value }}) => {
    this.props.setValidateCode(value)
  }
} 
const mapStateToProps = ({ loginReducer }) => ({ ...loginReducer })

export default connect(mapStateToProps, { ...actions })(Login)